﻿@page "/FetchSampointData"

@using Hangfire_Demo.Data
@inject CollectService collectService

<h1>采集数据展示</h1>

<p>This component demonstrates fetching data from a service.</p>

@if (devices == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <div style="display: flex;">
        <table id="table1" class="table" style="width: 50%;" onclick="updateTable2(event)">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>是否采集</th>
                    <th>设备描述</th>
                    <th>点位数量</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var dd in devices)
                {
                    <tr>
                        <td>@dd.number</td>
                        <td>@dd.IsCollect</td>
                        <td>@dd.deviceName</td>
                        <td>@dd.samplePoints.Count</td>
                    </tr>
                }
            </tbody>
    </table>

        @* <table id="table2" class="table" style="width: 50%;">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>是否采集</th>
                    <th>描述</th>
                    <th>点位</th>
                    <th>数据类型</th>
                    <th>读取值</th>
                    <th>单位</th>
                    <th>比例</th>
                    <th>测试</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var pp in points)
                {
                    <tr>
                        <td>@pp.Ratio</td>
                        <td>@pp.IsRead</td>
                        <td>@pp.pointDescription</td>
                        <td>@pp.readPoint</td>
                        <td>@pp.dataType</td>
                        <td>@pp.resData</td>
                        <td>@pp.unit</td>
                        <td>@pp.Ratio</td>
                        <td><button onclick="alert('Button clicked in right table')">Click me</button></td>
                    </tr>
                }
            </tbody>
    </table> *@
</div>

    @* <script>
        function updateTable2(event) {
            var table1 = document.getElementById("table1");
            var table2 = document.getElementById("table2");

            var rowIndex = event.target.parentNode.rowIndex - 1; // 获取点击的行索引

            var data1 = table1.rows[rowIndex].cells[0].innerText; // 获取点击行的第一个单元格内容
            var data2 = table1.rows[rowIndex].cells[1].innerText; // 获取点击行的第二个单元格内容

            table2.rows[1].cells[0].innerText = data1; // 更新表格2的第一行第一个单元格内容
            table2.rows[1].cells[1].innerText = data2; // 更新表格2的第一行第二个单元格内容
        }
    </script> *@
}

@code {
    private Device[] devices;
    private SamplePoint[] points;

    protected override async Task OnInitializedAsync()
    {
        devices = await collectService.GetCollectDataAsync(DateTime.Now);
    }
}
